<template>
  <view class="project-planning-container">
    <!-- 导航栏 -->
    <u-navbar title="项目任务规划与进度" left-icon="arrow-left" leftIconColor="#ffffff" leftIconSize="40rpx" bg-color="#4a90e2" :border="false" title-style="color: #ffffff;font-weight: bold;" placeholder @leftClick="goBack" />

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 项目概览卡片 -->
      <view class="overview-card">
        <view class="card-header">
          <text class="card-title">项目概览</text>
        </view>
        <view class="overview-content">
          <view class="overview-item">
            <text class="label">项目名称:</text>
            <text class="value">MasterCard移动端应用</text>
          </view>
          <view class="overview-item">
            <text class="label">技术栈:</text>
            <text class="value">uni-app + Vue 3 + Pinia + uView Plus + UnoCSS</text>
          </view>
          <view class="overview-item">
            <text class="label">目标平台:</text>
            <text class="value">微信小程序、H5、APP</text>
          </view>
          <view class="overview-item">
            <text class="label">项目状态:</text>
            <text class="value status">开发中</text>
          </view>
          <view class="overview-item">
            <text class="label">整体进度:</text>
            <text class="value progress">45%</text>
          </view>
        </view>
      </view>

      <!-- 已完成功能模块 -->
      <view class="section-card">
        <view class="card-header">
          <text class="card-title">已完成功能模块</text>
          <text class="card-subtitle">11个模块已完成</text>
        </view>
        <view class="module-list">
          <view class="module-item completed" v-for="(module, index) in completedModules" :key="index">
            <view class="module-info">
              <text class="module-name">{{ module.name }}</text>
              <text class="module-progress">{{ module.progress }}</text>
            </view>
            <view class="module-status">
              <text class="status-icon">✅</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 待开发功能模块 -->
      <view class="section-card">
        <view class="card-header">
          <text class="card-title">待开发功能模块</text>
          <text class="card-subtitle">8个模块待开发</text>
        </view>
        <view class="module-list">
          <view class="module-item pending" v-for="(module, index) in pendingModules" :key="index">
            <view class="module-info">
              <text class="module-name">{{ module.name }}</text>
              <text class="module-progress">{{ module.progress }}</text>
            </view>
            <view class="module-status">
              <text class="status-icon">{{ module.status }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 开发阶段规划 -->
      <view class="section-card">
        <view class="card-header">
          <text class="card-title">开发阶段规划</text>
        </view>
        <view class="phase-list">
          <view class="phase-item" v-for="(phase, index) in developmentPhases" :key="index">
            <view class="phase-header">
              <text class="phase-title">{{ phase.title }}</text>
              <text class="phase-duration">{{ phase.duration }}</text>
            </view>
            <view class="phase-content">
              <text class="phase-priority">优先级: {{ phase.priority }}</text>
              <text class="phase-goal">目标: {{ phase.goal }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 功能完成度统计 -->
      <view class="section-card">
        <view class="card-header">
          <text class="card-title">功能完成度统计</text>
        </view>
        <view class="progress-list">
          <view class="progress-item" v-for="(item, index) in progressStats" :key="index">
            <view class="progress-info">
              <text class="progress-name">{{ item.name }}</text>
              <text class="progress-percentage">{{ item.percentage }}</text>
            </view>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: item.percentage }"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 下一步行动计划 -->
      <view class="section-card">
        <view class="card-header">
          <text class="card-title">下一步行动计划</text>
        </view>
        <view class="action-list">
          <view class="action-item" v-for="(action, index) in nextActions" :key="index">
            <view class="action-time">{{ action.time }}</view>
            <view class="action-content">
              <text class="action-text">{{ action.task }}</text>
              <text class="action-priority" :class="action.priority">{{ action.priority }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 最新完成功能 -->
      <view class="section-card">
        <view class="card-header">
          <text class="card-title">最新完成功能</text>
        </view>
        <view class="feature-list">
          <view class="feature-item" v-for="(feature, index) in latestFeatures" :key="index">
            <text class="feature-name">{{ feature.name }}</text>
            <text class="feature-desc">{{ feature.description }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 已完成功能模块数据
const completedModules = ref([
  { name: '基础架构', progress: '100%' },
  { name: '页面路由配置', progress: '100%' },
  { name: '用户系统', progress: '95%' },
  { name: '个人中心页面', progress: '100%' },
  { name: '设置页面', progress: '100%' },
  { name: '关于我们页面', progress: '100%' },
  { name: '公司简介页面', progress: '100%' },
  { name: '应用更新功能', progress: '100%' },
  { name: '第三方绑定管理', progress: '90%' },
  { name: '登录系统完善', progress: '95%' },
  { name: 'API接口系统', progress: '85%' }
]);

// 待开发功能模块数据
const pendingModules = ref([
  { name: '首页模块', progress: '5%', status: '🔄' },
  { name: '订单模块', progress: '5%', status: '🔄' },
  { name: '待办模块', progress: '5%', status: '🔄' },
  { name: '财务模块', progress: '0%', status: '🚧' },
  { name: '项目管理模块', progress: '0%', status: '🚧' },
  { name: '订单中心子功能', progress: '0%', status: '🚧' },
  { name: '用户管理功能', progress: '80%', status: '🚧' },
  { name: '法律条款页面', progress: '0%', status: '🚧' }
]);

// 开发阶段规划数据
const developmentPhases = ref([
  {
    title: '第一阶段：核心功能完善',
    duration: '2-3周',
    priority: '高',
    goal: '完成主要业务功能的基础实现'
  },
  {
    title: '第二阶段：财务功能开发',
    duration: '2-3周',
    priority: '高',
    goal: '完成财务相关功能'
  },
  {
    title: '第三阶段：项目管理功能',
    duration: '2-3周',
    priority: '中',
    goal: '完善项目管理相关功能'
  },
  {
    title: '第四阶段：用户管理完善',
    duration: '1-2周',
    priority: '中',
    goal: '完善用户相关功能'
  },
  {
    title: '第五阶段：优化和测试',
    duration: '1-2周',
    priority: '高',
    goal: '应用优化和测试'
  }
]);

// 功能完成度统计
const progressStats = ref([
  { name: '页面路由', percentage: '100%' },
  { name: '状态管理', percentage: '100%' },
  { name: 'UI组件', percentage: '90%' },
  { name: 'API集成', percentage: '85%' },
  { name: '数据持久化', percentage: '95%' },
  { name: '应用更新', percentage: '100%' },
  { name: '登录系统', percentage: '95%' },
  { name: '第三方登录', percentage: '90%' }
]);

// 下一步行动计划
const nextActions = ref([
  { time: '本周', task: '完成首页模块的UI设计和基础功能', priority: '高' },
  { time: '本周', task: '开始订单模块的开发', priority: '高' },
  { time: '本周', task: '完善法律条款页面', priority: '中' },
  { time: '本周', task: '优化现有页面的用户体验', priority: '中' },
  { time: '下周', task: '完成订单模块的核心功能', priority: '高' },
  { time: '下周', task: '开始待办模块的开发', priority: '高' },
  { time: '下周', task: '添加数据统计功能', priority: '中' },
  { time: '下周', task: '进行第一轮功能测试', priority: '高' }
]);

// 最新完成功能
const latestFeatures = ref([
  { name: '第三方绑定管理', description: '完整的微信/QQ绑定解绑功能' },
  { name: '登录系统重构', description: '支持短信验证码和密码两种登录方式' },
  { name: 'API接口完善', description: '完整的登录、用户管理API接口' },
  { name: '请求拦截器', description: '统一的请求响应处理机制' }
]);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.project-planning-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #4a90e2 20%, #f8f8f8 50%);
  position: relative;
}

.main-content {
  padding: 40rpx 30rpx;
  min-height: calc(100vh - 88rpx);
  box-sizing: border-box;
}

// 卡片通用样式
.section-card {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 30rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    display: block;
    margin-bottom: 8rpx;
  }

  .card-subtitle {
    font-size: 24rpx;
    color: #666666;
  }
}

// 项目概览卡片
.overview-card {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.overview-content {
  padding: 30rpx;

  .overview-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      font-size: 28rpx;
      color: #666666;
      width: 160rpx;
      flex-shrink: 0;
    }

    .value {
      font-size: 28rpx;
      color: #333333;
      flex: 1;

      &.status {
        color: #4a90e2;
        font-weight: bold;
      }

      &.progress {
        color: #ff6b35;
        font-weight: bold;
        font-size: 32rpx;
      }
    }
  }
}

// 模块列表
.module-list {
  padding: 20rpx 30rpx 30rpx;

  .module-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .module-info {
      flex: 1;

      .module-name {
        font-size: 28rpx;
        color: #333333;
        display: block;
        margin-bottom: 8rpx;
      }

      .module-progress {
        font-size: 24rpx;
        color: #666666;
      }
    }

    .module-status {
      .status-icon {
        font-size: 32rpx;
      }
    }

    &.completed {
      .module-name {
        color: #52c41a;
      }
    }

    &.pending {
      .module-name {
        color: #fa8c16;
      }
    }
  }
}

// 开发阶段规划
.phase-list {
  padding: 20rpx 30rpx 30rpx;

  .phase-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .phase-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12rpx;

      .phase-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
      }

      .phase-duration {
        font-size: 24rpx;
        color: #4a90e2;
        background: #e6f7ff;
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
      }
    }

    .phase-content {
      .phase-priority {
        font-size: 24rpx;
        color: #666666;
        margin-right: 20rpx;
      }

      .phase-goal {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}

// 进度统计
.progress-list {
  padding: 20rpx 30rpx 30rpx;

  .progress-item {
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .progress-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12rpx;

      .progress-name {
        font-size: 28rpx;
        color: #333333;
      }

      .progress-percentage {
        font-size: 24rpx;
        color: #4a90e2;
        font-weight: bold;
      }
    }

    .progress-bar {
      height: 8rpx;
      background: #f0f0f0;
      border-radius: 4rpx;
      overflow: hidden;

      .progress-fill {
        height: 100%;
        background: linear-gradient(to right, #4a90e2, #87ceeb);
        border-radius: 4rpx;
        transition: width 0.3s ease;
      }
    }
  }
}

// 行动计划
.action-list {
  padding: 20rpx 30rpx 30rpx;

  .action-item {
    display: flex;
    align-items: flex-start;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .action-time {
      font-size: 24rpx;
      color: #4a90e2;
      background: #e6f7ff;
      padding: 8rpx 16rpx;
      border-radius: 12rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .action-content {
      flex: 1;

      .action-text {
        font-size: 28rpx;
        color: #333333;
        display: block;
        margin-bottom: 8rpx;
      }

      .action-priority {
        font-size: 20rpx;
        padding: 4rpx 8rpx;
        border-radius: 8rpx;
        color: #ffffff;

        &.高 {
          background: #ff4d4f;
        }

        &.中 {
          background: #fa8c16;
        }

        &.低 {
          background: #52c41a;
        }
      }
    }
  }
}

// 最新功能
.feature-list {
  padding: 20rpx 30rpx 30rpx;

  .feature-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .feature-name {
      font-size: 28rpx;
      font-weight: bold;
      color: #4a90e2;
      display: block;
      margin-bottom: 8rpx;
    }

    .feature-desc {
      font-size: 24rpx;
      color: #666666;
      line-height: 1.5;
    }
  }
}
</style>
